<template>
	<view class="circle">
		<view class="circle-warpper" @tap="removeAll">
			<view class="avatar">
				<image @tap="to(userLink)" :src="data.isPublic==0?'/static/logo.png':data.avatar" mode="widthFix">
				</image>
			</view>
			<view class="content">
				<view class="nickname">{{ data.isPublic==0?`生蚝圈用户${data.userId}`:data.nickname }}</view>
				<view class="text" @tap="to(link)">
					<view class="text-warpper" v-for="(item,index) in content" :key="index">
						<view v-if="item.type!='phone'">{{item.val}}</view>
						<!-- @tap.stop="call(item)" -->
						<view v-else v-bind:class="{phone:item.type=='phone'}">
							<checkbox-group @tap.stop="changeCheck">
								<label>
									<checkbox class="menu-check" :checked="check" /><text>{{item.val}}</text>
									<view class="menu-group" v-bind:class="{show:check}">
										<view class="menu" @tap.stop="copy(item.val)">复制</view>
										<view class="menu" @tap.stop="call(item)">拨打</view>
									</view>
								</label>

							</checkbox-group>

						</view>
					</view>

				</view>
				<view class="media__files unlined">
					<view class="media-item__image" v-if="data.category=='image'" v-for="(item,index) in data.images" :key="index">
						<view class="media__warpper">
							<image @click="getImgIndex(item,index)" lazy-load="true" :src="item" mode="widthFix">
							</image>
						</view>
					</view>
					<!-- v-bind:class="{amplifica:amplifica}" -->
					<view class="media-item__video" @tap="isAmplifica" v-if="data.category=='video'">
						<video class="video" :id="`video_${data.id}`" :ref="`video_${data.id}`" :src="data.videos[0]" allowfullscreen="true"
						 :muted="amplifica" :show-fullscreen-btn="false" @play="play" @fullscreenchange="fullscreen" controls></video>
					</view>
				</view>
				<view class="bottom-location">
					<view class="address">{{ data.location }}</view>
				</view>
				<view class="bottom">

					<view class="bottom-info">
						<view class="timer">{{ data.created |  timer }}</view>
						<view class="delete" v-if="delShow" @tap.stop="del()">删除</view>
					</view>
					<view class="bottom-operate" v-if="data.status=='normal'">
						<view class="operate-item" @tap="praise(data.id)">点赞</view>
						<view class="operate-item" @tap="share(data.id)">分享</view>
						<view class="operate-item" @tap.stop="reply">保密留言</view>
					</view>
					<view class="statu" v-else>
						{{data.status | statu}}
						<!-- normal/audit/not_pass/expire -->
					</view>
				</view>
				<view class="comments" v-if="data.status=='normal'&&data.comments.length!=0">
					<view class="comment-item" v-for="(item,index) in data.comments" :key="index" @tap.stop="reply(item,index)">
						生蚝圈用户{{item.fromUserId}}：{{item.content}}
						<view class="menu" v-if="item.menuShow" @tap.stop="delReply(item)">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="comment" v-if="(commentFrame?commentFrame:comment)&&data.status=='normal'" v-bind:class="{comment__bottom:commentFrame}">
			<input class="comment-input" type="text" :focus="comment" @confirm="postComment" v-model="commentText" confirm-type="发送"
			 :placeholder="placeholder" />
			<button class="comment-btn" size="mini" type="primary" @tap="postComment">发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Circle",
		data() {
			return {
				check: false,
				placeholder: "评论",
				videoContext: '',
				comment: false,
				commentText: '',
				amplifica: false,
				commentData: ''
			}
		},
		props: {
			userId: {
				type: String,
				default () {
					return ""
				}
			},
			data: {
				type: Object,
				default () {
					return {}
				}
			},
			delShow: {
				type: Boolean,
				default () {
					return false
				}
			},
			scroll: {
				type: Number,
				default () {
					return 0
				}
			},
			userLink: {
				type: String,
				default () {
					return null
				}
			},
			link: {
				type: String,
				default () {
					return null
				}
			},
			commentFrame: {
				type: Boolean,
				default () {
					return false
				}
			},
			index: {
				type: Number,
				default () {
					return NaN
				}
			}
		},
		computed: {
			content: function() {
				var c = this.data.content.split(/(1\d{10})/),
					list = []
				for (var i in c) {
					var flag = c[i] != '' && /^(1\d{10})$/.test(c[i])
					c[i] != '' && list.push({
						type: flag ? 'phone' : 'text',
						val: c[i]
					})
				}
				return list
			}
		},
		filters: {
			statu(statu) {
				var status = {
					normal: "normal",
					audit: "audit",
					not_pass: "not_pass",
					expire: "expire"
				}
				return status[statu]
			},
			timer(timer) {
				if (!timer) return ''
				timer = timer.replace(/-/g, '/')
				var time = new Date(timer)
				time = time.getTime()
				var thisTime = new Date()
				thisTime = thisTime.getTime()
				var utc = (thisTime - time) / (60 * 1000)
				if (utc < 60) {
					return Math.floor(utc) + '分钟前'
				} else if (utc > 60 && utc < 1440) {
					return Math.floor(utc / 60) + '小时前'
				} else if (utc > 1440 && utc < 43200) {
					return Math.floor(utc / 60 / 24) + '天前'
				} else if (utc > 43200 && utc < 525600) {
					return Math.floor(utc / 60 / 24 / 30) + '个月前'
				} else {
					return Math.floor(utc / 60 / 24 / 365) + '年前'
				}
			}
		},
		methods: {
			to(link) {
				if (link) {
					uni.navigateTo({
						url: link,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			changeCheck(e) {
				this.check = !this.check
			},
			copy(val) {
				this.removeAll()
				uni.setClipboardData({
					data: val, // 要复制的文字
					success: function(res) {
						uni.getClipboardData({
							success: (res) => {
								uni.showToast({
									title: '复制成功'
								})
							}
						})
					}
				})
			},
			call(obj) {
				this.check = false
				if (obj.type == "phone") {
					uni.makePhoneCall({
						phoneNumber: obj.val,
						success: (res) => {
							console.log('success')
						},
						fail: (res) => {
							// this.call(obj)
						}
					})
				}
			},
			play() {
				var videoContext = uni.createVideoContext('video_' + this.data.id, this)
				videoContext.requestFullScreen({
					direction: 90
				})
				this.amplifica = true
			},
			fullscreen(e) {
				var videoContext = uni.createVideoContext('video_' + this.data.id, this)
				if (!e.detail.fullScreen) {
					videoContext.pause()
				}
			},
			isAmplifica() {
				var videoContext = uni.createVideoContext('video_' + this.data.id, this)
				if (this.amplifica) {
					videoContext.play()
					videoContext.requestFullScreen()
				} else {
					videoContext.pause()
					videoContext.exitFullScreen()
				}
				this.amplifica = !this.amplifica
			},
			commentDisabled() {
				if (this.commentText) return false
				else return true
			},
			getImgIndex(item, index) {
				let imgs = this.data.images
				uni.previewImage({
					urls: imgs,
					current: index
				})
			},
			postComment() {
				this.$emit("postComment", {
					index: this.index,
					id: this.commentData.id,
					text: this.commentText,
					toUserId: this.commentData.fromUserId,
					releaseInfoId: this.commentData.releaseInfoId,
				})
				this.removeAll()
				this.commentText = ''
			},
			reply(obj, index) {
				this.commentData = obj
				if (this.userId == obj.fromUserId) {
					this.$parent.show(this.index, index)
				} else {
					let text = obj.fromUserId ? "回复生蚝圈用户" + obj.fromUserId + ":" : "评论"
					this.comment = true
					this.placeholder = text
				}
			},
			share(id) {
				this.$emit("share", id)
			},
			praise(id) {
				this.$emit("praise", id)
			},
			del(obj) {
				let _this = this
				uni.showModal({
					content: '删除该条信息？',
					confirmText: "删除",
					confirmColor: "#ff0000",
					success: function(res) {
						if (res.confirm) {
							_this.$emit("del", obj)
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				});
			},
			delReply(obj) {
				this.removeAll()
				let _this = this
				uni.showModal({
					content: '删除该条信息？',
					confirmText: "删除",
					confirmColor: "#ff0000",
					success: function(res) {
						if (res.confirm) {
							_this.$emit("delReply", obj)
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				});
			},
			removeAll() {
				this.check = false
				this.comment = false
				this.$parent.close(this.index)
				// this.data.comments.forEach(e => {
				// 	e.menuShow = false
				// })
			}
		},
		onPageScroll(e) {
			this.comment = false
		}
	}
</script>

<style lang="scss">
	.circle {
		border-bottom: 1px solid #C8C7CC80;
	}

	.circle-warpper {
		display: flex;
		padding: 10upx;
		box-sizing: border-box;

		&:last-child {
			border: none;
		}

		.avatar {
			width: 100upx;

			image {
				overflow: hidden;
				border-radius: 10upx;
				width: 100upx;
				height: 100upx;
			}
		}

		.content {
			flex: 1;
			overflow: hidden;
			padding-left: 10upx;
			max-width: calc(100% - 100upx);

			.media__files {
				margin-top: 10upx;

				&.unlined {}

				display: flex;
				flex-wrap: wrap;

				.media-item__image {
					flex: 0.3;
					min-width: 32%;
					margin-right: 1%;
					margin-bottom: 1%;

					.media__warpper {
						height: 0;
						overflow: hidden;
						position: relative;
						padding-bottom: 100%;

						image {
							top: 50%;
							left: 50%;
							width: 100%;
							position: absolute;
							transform: translate(-50%, -50%);
						}
					}
				}

				.media-item__video {
					z-index: 2;
					width: 50%;
					max-width: 50%;
					min-width: 50%;
					position: relative;

					&.amplifica {
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						width: 100%;
						position: fixed;

						&::after {
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							z-index: 1;
							content: "";
							display: block;
							position: fixed;
							background-color: #555555;
						}

						.video {
							left: 0;
							top: 50%;
							z-index: 2;
							width: 100%;
							max-width: 100%;
							min-width: 100%;
							position: absolute;
							transform: translateY(-50%);

							video {
								width: 100%;
							}
						}
					}

					.video {
						width: 100%;
						max-width: 100%;
						min-width: 100%;

						video {
							width: 100%;
						}
					}
				}

			}

			.comments {
				padding: 10upx;
				font-size: 30upx;
				border-radius: 4upx;
				background-color: #d3d3d350;

				.comment-item {
					position: relative;

					.menu {
						right: 3%;
						z-index: 9;
						bottom: 150%;
						padding: 20upx;
						position: absolute;
						background-color: #FFFFFF;
						box-shadow: 5upx 5upx 20upx #d3d3d3;
					}
				}
			}

			.text {
				display: flex;

				.text-warpper {

					.phone {
						color: #2B9939;
						position: relative;

						.menu-check {
							display: none;
						}

						.menu-group {
							right: 0;
							z-index: 2;
							color: #000000;
							position: absolute;
							background-color: #FFFFFF;
							box-shadow: 5upx 5upx 20upx #d3d3d3;
							transform: scale(0);
							transition: .2s;

							&.show {
								transform: scale(1);
							}

							.menu {
								padding: 20upx;
							}

						}
					}
				}
			}
		}

		.address {
			color: #999999;
			margin-right: 10upx;
			font-size: 28upx;
		}

		.bottom {
			display: flex;
			margin-top: 10upx;
			justify-content: space-between;

			.bottom-info,
			.bottom-operate {
				display: flex;
				align-items: center;

				.timer {
					color: #999999;
					margin-right: 10upx;
					font-size: 28upx;
				}

				.delete {
					font-size: 28upx;
				}

				.operate-item {
					margin-left: 10upx;
				}
			}

		}

	}

	.comment {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 20upx;
		box-sizing: border-box;
		justify-content: space-between;

		.comment-input {
			flex: 1;
			margin: 10upx 0;
		}

		.comment-btn {
			margin: 0;
		}

		&.comment__bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}
</style>
